<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <!-- 1. 变量名 -->
        <h1> {{ msg }}  </h1>
        <!-- 2. 对象.属性 -->
        <p>我是 {{ obj.name }} 今年 {{ obj.age }} 岁了</p>
        <!-- 3. 三元表达式 -->
        <p> {{ obj.age >= 18 ? '成年了' : '未成年' }} </p>
        <!-- 4. 函数或方法的调用 -->
        <p> 函数 fn() 的返回值是 {{ fn() }} </p>
        <!-- 4. 方法调用 -->
        <p> {{ msg }} 有 {{ msg.split(" ").length }} 个单词 </p>
        <!-- 算数运算符 -->
        <p> 明年 {{ obj.age + 1}} 岁了</p>
    </div>
    <script>
        Vue.createApp({
            setup() {
                let msg = 'Hello World';
                const obj = {
                    id: 1,
                    name: 'lisi',
                    age: 12
                }
                const fn = () => {
                    return 666;
                }
                return {
                    msg,
                    obj,
                    fn
                }
            }
        }).mount('#app');
    </script>
</body>

</html>